import React, { Component } from 'react'
import { View, StyleSheet, Text, TextInput, Platform, TouchableOpacity, DeviceEventEmitter } from 'react-native'
import ViewUtils from '../src/Utils/ViewUtils'
import GlobalStyles from '../src/styles/GlobalStyle'
import {connect } from 'react-redux'

class SearchHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rightButtonText: '搜索'
    }
  }

  loadData () {
    // this.props.navigation.setParams('search', this.inputKeky)
    DeviceEventEmitter.emit('search', this.inputKeky);
  }

  onBackPress() {
    this.refs.input.blur();
    this.props.navigation.pop();
    return true;
  }

  renderNavBar() {
    let backButton = ViewUtils.getLeftButton(()=>this.onBackPress());
    let inputView = <TextInput
        ref="input"
        onChangeText={text=>{
          this.inputKeky=text
          this.setState({
            rightButtonText: '搜索'
          })
        }}
        style={styles.textInput}
    >
    </TextInput>
    let rightButton =
        <TouchableOpacity
            onPress={()=> {
                this.refs.input.blur();
                this.onRightButtonClick();
            } }
        >
            <View style={{marginRight: 10}}>
                <Text style={styles.title}>{this.state.rightButtonText}</Text>
            </View>
        </TouchableOpacity>

    return <View style={{
        backgroundColor: this.props.themeColor,
        flexDirection: 'row',
        alignItems: 'center',
        height: (Platform.OS === 'ios') ? GlobalStyles.nav_bar_height_ios : GlobalStyles.nav_bar_height_android,
    }}>
        {backButton}
        {inputView}
        {rightButton}
    </View>
  }

  onRightButtonClick () {
    if (this.state.rightButtonText === '搜索') {
      this.setState({rightButtonText: '取消'})
      this.loadData();

    } else {
      this.setState({rightButtonText: '搜索',
          isLoading:false
      })
      // this.cancelable.cancel();
    }
  }

  render() {
    return (
      <View>
        {this.renderNavBar()}
      </View>
    )
  }
}

var styles = StyleSheet.create({
  container: {
      flex: 1,
      alignItems: 'stretch',
      // backgroundColor:'red'
  },
  statusBar: {
      height: 20,
  },
  textInput: {
      flex: 1,
      height: (Platform.OS === 'ios') ? 30 : 40,
      borderWidth: (Platform.OS === 'ios') ? 1 : 0,
      borderColor: "white",
      alignSelf: 'center',
      paddingLeft: 5,
      marginRight: 10,
      marginLeft: 5,
      borderRadius: 3,
      opacity: 0.7,
      color: 'white'
  },
  title: {
      fontSize: 18,
      color: "white",
      fontWeight: '500'
  },
  centering:{
      alignItems:'center',
      justifyContent:'center',
      flex:1,
  },
  bottomButton:{
      alignItems:'center',
      justifyContent:'center',
      opacity:0.9,
      height:40,
      position:'absolute',
      left:10,
      top:GlobalStyles.window_height-45,
      right:10,
      borderRadius:3
  }

});

export default connect((state)=> ({themeColor: state.theme.themeColor}), null)(SearchHeader)
